<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="https://at.alicdn.com/t/font_2005268_hs4e6r1fzp.js"></script>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/login.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/jquery-3.4.1.min.js"></script>
</head>

<body>
    <header>
        <!--  -->
        <div class="container">
            <div class="left" id="btn-drawer">
                <span class="icon-m"></span>
                <span class="icon-m"></span>
                <span class="icon-m"></span>
            </div>
            <div class="middle">
                <img src="./images/logo.png" alt="">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shouji">
                    </use>
                </svg>
            </div>
            <div class="right">
                <span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                </span>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                    </svg>
                </a>
            </div>
        </div>
    </header>
    <div class="drawerbox" data-drawer="box">
        <div class="draw-content">
            <p class="btn-return">←</p>
            <ul>
                <li><a href="./index.html">首页</a></li>
                <li><a href="#">排行榜</a></li>
                <li><a href="#">安利墙</a></li>
                <li><a href="#">发现</a></li>
                <li><a href="#">动态</a></li>
            </ul>
        </div>
        <div class="drawer-mask"></div>
    </div>
    <!--  -->
    <section>
        <div class="loginbox">
            <div class="container">
                <p class="login-title">登录</p>
                <div class="login-logo">
                    <img src="./images/logo2.png" alt="tabtab">
                    <p>即刻加入游戏狂热者行列</p>
                </div>
                <div class="tabbox">
                    <div class="tab-nav" data-tab="tabs" data-taget="#tabcontent">
                        <div class="tab-nav-item active">手机号码</div>
                        <div class="tab-nav-item">邮箱账号</div>
                    </div>
                    <div class="tab-content" id="tabcontent">
                        <div class="tab-content-item ">
                            <div class="input-phone active">
                                <span class="seletion">
                                    CN+86 ▼
                                </span>
                                <input type="text" placeholder="输入手机号码">
                            </div>
                            <div class="btn-login">
                                <p>登录即同意 <a href="">用户协议、隐私政策</a> 首次登录将自动注册</p>
                                <button class="active">登录</button>
                            </div>
                            <div class="content-line">
                                <span>社交账号登录</span>
                            </div>
                            <div class="other-login">
                                <span>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-weixin">
                                        </use>
                                    </svg>
                                    <p>微信</p>
                                </span>
                                <span>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-qq">
                                        </use>
                                    </svg>
                                    <p>QQ</p>
                                </span>
                            </div>
                        </div>
                        <div class="tab-content-item hide">
                            <div class="input-email active">
                                <input type="text" placeholder="邮箱账号">
                            </div>
                            <div class="input-email">
                                <input type="password" placeholder="密码">
                            </div>
                            <div class="btn-remember">
                                <span><input type="checkbox">记住我</span>
                                <span><a href="">忘记密码</a></span>
                            </div>
                            <div class="btn-login">
                                <p>登录即同意 <a href="">用户协议、隐私政策</a> 首次登录将自动注册</p>
                                <button class="active">登录</button>
                            </div>
                            <div class="content-line">
                                <span>社交账号登录</span>
                            </div>
                            <div class="other-login">
                                <span>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-weixin">
                                        </use>
                                    </svg>
                                    <p>微信</p>
                                </span>
                                <span>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-qq">
                                        </use>
                                    </svg>
                                    <p>QQ</p>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 底部 -->
    <footer>
        <div class="container">
            <p>Contact Us</p>
            <ul class="list-logo">
                <li><a href="#"> <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-facebook3">
                            </use>
                        </svg></a></li>
                <li><a href="#"> <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-weixin">
                            </use>
                        </svg></a></li>
                <li><a href="#"> <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qq">
                            </use>
                        </svg></a></li>
                <li><a href="#"> <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhihu0">
                            </use>
                        </svg></a></li>
                <li><a href="#"> <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-weibo">
                            </use>
                        </svg></a></li>
                <li><a href="#"> <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-mail4">
                            </use>
                        </svg></a></li>
            </ul>
            <p><span class="red">TapTap 四周年 </span>2019年度游戏大赏 簧火计划
            </p>
            <div class="logo"><img src="./images/logo2.png" alt=""></div>
            <div class="dropdown">
                <button>中文(简体)</button>
                <span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xia1">
                        </use>
                    </svg>
                </span>
            </div>
            <ul class="lisk">
                <li><a href="">开发者中心</a></li>
                <li><a href="">广告投放</a></li>
                <li><a href="">关于我们</a></li>
                <li><a href="">加入我们</a></li>
                <li><a href="">用户认证</a></li>
            </ul>
            <p class="bigp">Discover Superb Games.</p>
            <div class="text">
                <p>Copyright G 2020 TapTap. AI rights Reserved.</p>
                <p>适龄提示本公司产品适合10周岁以上玩家使用</p>
                <p>未成年人家长监护隐私政策侵权投诉</p>
                <p>沪ICP备16012525号-1沪网文(2019)3544-255号</p>
                <p>经营许可证编号:沪B2 20170322</p>
                <p>易玩(上海)网络科技有限公司</p>
                <p>公司地址:上海市静安区万荣路700号A3 202</p>
                <p>注册地址:上海市闵行区紫星路588号2幢2122室</p>
            </div>
        </div>
    </footer>
    <script>
        $(function () {

            $('[data-tab="tabs"]').on("click", ".tab-nav-item", function () {
                let index = $(this).index();
                $(this).addClass("active").siblings().removeClass("active");
                let taget = $(this).parent().data('taget');

                $(taget).find('.tab-content-item').eq(index).removeClass('hide').siblings().addClass('hide');
            })
        })
    </script>
    <script src="./js/base.js"></script>
</body>

</html>